<template>
  <div class="home">
    <div class="home-swiper">
      <carousel :swiper-list="swiperList" />
    </div>
    <div class="home-content">
      <div class="home--content-head">
        <notice />
      </div>
      <div class="home-content-center">
        <class />
      </div>
      <div class="home-content-footer">
        <hot-recommend />
      </div>
    </div>
  </div>
</template>

<script>

import Notice from './Notice'
import Class from './Class'
import HotRecommend from './HotRecommend'
export default {
  components: {
    Notice,
    Class,
    HotRecommend
  },
  data() {
    return {
      swiperList: []
    }
  },
  mounted() {
    this.getSwiperList()
    // this.$store.dispatch('user/getUserInfo')
  },
  methods: {
    // 获得轮播图
    async getSwiperList() {
      const result = await this.$API.home.getSwiperList()
      if (result.code === 200) {
        this.swiperList = result.data
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.home{
  min-width: 1200px;
.home-swiper{
  width: 100%;
  height: 400px;
}
.home-content{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
    .home--content-head{
      padding: 80px 100px;
      padding-bottom:80px;
      width: 100%;
      text-align: center;
    }
    .home-content-center{
      padding: 80px 100px;
      width: 100%;
      text-align: center;
    }
    .home-content-footer{
      padding: 80px 100px;
      width: 100%;
      text-align: center;
    }
}
}
</style>

